<template>
  <div>
    <h1 style="color:red">Person组件总人数为：{{personList.length}}</h1>
    <h2>当前求和：{{sum}}</h2>
    <h3>当前求和放大10倍后为{{bigSum}}</h3>
    <h3>我在：{{school}}，学习：{{subject}}</h3>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment(n)">+</button>
    <button @click="decrement(n)">-</button>
    <button @click="incrementOdd(n)">当前求和为奇数再加</button>
    <button @click="incrementWait({value:n,time})">等{{time}}ms再加</button>
  </div>
</template>

<script>
  import {mapState, mapGetters, mapMutations, mapActions} from 'vuex'
export default {
  name:'Count',
  data () {
    return {
      n:1,
      time:1500,
    }
  },
  computed: {

    // 从state中读取数据，进行处理***

    //方法一：自己用计算属性写
    /* sum(){
      return this.$store.state.sum
    },
    school(){
      return this.$store.state.school
    },
    subject(){
      return this.$store.state.subject
    }, */

    //方法二：使用mapState生成计算属性,进行简化，从state中读取数据（对象写法）
    //注意：将mapState生成的对象展开，填充到computed中，且这里的对象无法简化，因为key:value中的value不是变量
    // ...mapState({sum:'sum',school:'school',subject:'subject'}),

    //方法三：使用mapState生成计算属性,进行简化，从state中读取数据（数组写法）
    ...mapState(['sum','school','subject','personList']),


    /********************** 分割线 ************************** */


    // 从getters中读取数据，进行处理***

    //方法一：直接编写计算属性
    /* bigSum(){
      return this.$store.getters.bigSum
    }, */

    // 方法二：使用mapGetters （对象写法）
    // ...mapGetters({bigSum:'bigSum'}),
    
    // 方法二：使用mapGetters （数组写法）
    ...mapGetters(['bigSum']),

  },
  methods: {

    //调用mutations***

    // 直接使用$store。commit调用（方法一）
    /* increment(){
      this.$store.commit('INCREMENT', this.n)
    },
    decrement(){
      this.$store.commit('DECREMENT', this.n)
    }, */

    // 使用mapMutations生成对应的方法，调用mutations（方法二:对象写法）
    // 注意：传参是在方法的调用出进行传参，见line11-14
    ...mapMutations({increment: 'INCREMENT',decrement:'DECREMENT'}),

    // 使用mapMutations生成对应的方法，调用mutations（方法三:数组写法）
    // 注意：传参是在方法的调用出进行传参，见line11-14
    ...mapMutations(['INCREMENT','DECREMENT']),

    /* *********************** 分割线 ************************** */

    // 调用actions***
    
    // 直接编写调用代码，使用dispatch调用（方法一）
    /* incrementOdd(){
      this.$store.dispatch('incrementOdd', this.n)
    },
    incrementWait(){
      this.$store.dispatch('incrementWait', {value:this.n,time:this.time})
    }, */

    //使用mapActions自动生成对应的方法，调用actions（方法二：对象写法）
    // 注意：传参是在方法的调用出进行传参，见line11-14
    // ...mapActions({incrementOdd:'incrementOdd',incrementWait:'incrementWait'}),
    
    //使用mapActions自动生成对应的方法，调用actions（方法三：数组写法）
    // 注意：传参是在方法的调用出进行传参，见line11-14
    ...mapActions(['incrementOdd','incrementWait']),
  }
}
</script>
